<template>
    <a-row>
        <a-col :span="24">
            <a-button type="primary">Primary</a-button>
            <a-button>Default</a-button>
            <a-button type="dashed">Dashed</a-button>
            <a-button type="danger">Danger</a-button>
            <a-config-provider :auto-insert-space-in-button="false">
                <a-button type="primary">按钮</a-button>
            </a-config-provider>
            <a-button type="primary">按钮</a-button>
            <a-button type="link">Link</a-button>
        </a-col>
    </a-row>

    <a-row id="components-button-demo-button-group">
        <a-col :span="24">
            <h4>Basic</h4>
            <a-button-group>
                <a-button>Cancel</a-button>
                <a-button type="primary">OK</a-button>
            </a-button-group>

            <a-button-group>
                <a-button disabled>L</a-button>
                <a-button disabled>M</a-button>
                <a-button disabled>R</a-button>
            </a-button-group>

            <a-button-group>
                <a-button type="primary">L</a-button>
                <a-button>M</a-button>
                <a-button>M</a-button>
                <a-button type="dashed">R</a-button>
            </a-button-group>

            <h4>With Icon</h4>
            <a-button-group>
                <a-button type="primary">
                    <LeftOutlined/>
                    Go back
                </a-button>
                <a-button type="primary">Go forward
                    <RightOutlined/>
                </a-button>
            </a-button-group>

            <a-button-group>
                <a-button type="primary">
                    <template #icon>
                        <CloudOutlined/>
                    </template>
                </a-button>
                <a-button type="primary">
                    <template #icon>
                        <CloudDownloadOutlined/>
                    </template>
                </a-button>
            </a-button-group>
        </a-col>
    </a-row>


    <a-row>
        <a-col :span="24">
            <a-button type="primary">
                Primary
            </a-button>
            <a-button type="primary" disabled>Primary(disabled)</a-button>
            <br>
            <a-button>Default</a-button>
            <a-button disabled>Default(disabled)</a-button>
            <br>
            <a-button type="dashed">Dashed</a-button>
            <a-button type="dashed" disabled>Dashed(disabled)</a-button>
            <br>
            <a-button type="link">Link</a-button>
            <a-button type="link" disabled>Link(disabled)</a-button>

            <div :style="{padding:'8px 8px 0 8px',background:'rgb(190,200,200)'}">
                <a-button ghost>Ghost</a-button>
                <a-button ghost disabled>Ghost(disabled)</a-button>
            </div>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <div :style="{background: 'rgb(190,200,200',padding:'26px 16px 16px'}">
                <a-button type="primary" ghost>Primary</a-button>
                <a-button ghost>Default</a-button>
                <a-button type="dashed" ghost>Dashed</a-button>
                <a-button type="danger" ghost>Danger</a-button>
                <a-button type="link" ghost>Link</a-button>
            </div>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <a-button type="primary" shape="circle">
                <template #icon>
                    <SearchOutlined/>
                </template>
            </a-button>

            <a-button type="primary" shape="circle">A</a-button>
            <a-button type="primary">
                <template #icon>
                    <SearchOutlined/>
                </template>
                Search
            </a-button>
            <a-button shape="circle">
                <template #icon>
                    <SearchOutlined/>
                </template>
            </a-button>
            <a-button>
                <template #icon>
                    <SearchOutlined/>
                </template>
                Search
            </a-button>
            <a-button shape="circle">
                <template #icon>
                    <SearchOutlined/>
                </template>
            </a-button>
            <a-button>
                <template #icon>
                    <SearchOutlined/>
                </template>
                Search
            </a-button>
            <a-button type="dashed" shape="circle">
                <template #icon>
                    <SearchOutlined/>
                </template>
            </a-button>
            <a-button type="dashed">
                <template #icon>
                    <SearchOutlined/>
                </template>
                Search
            </a-button>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <a-button type="primary" loading>Loading</a-button>
            <a-button type="primary" size="small" loading>Loading</a-button>
            <br>
            <a-button type="primary" :loading="loading" @mouseenter="enterLoading">
                mouseenter me!
            </a-button>
            <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
                延迟1S
            </a-button>
            <br>
            <a-button type="primary" loading/>
            <a-button type="primary" shape="circle" loading/>
            <a-button type="danger" shape="round" loading/>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <a-button type="primary">Primary</a-button>
            <a-button>Secondary</a-button>
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                        <a-menu-item key="1">
                            1st item
                        </a-menu-item>
                        <a-menu-item key="2">
                            2nd item
                        </a-menu-item>
                        <a-menu-item key="3">
                            3rd item
                        </a-menu-item>
                    </a-menu>
                </template>
                <a-button>Actions
                    <DownOutlined/>
                </a-button>
            </a-dropdown>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <a-radio-group :value="size" @change="handSizeChange">
                <a-radio-button value="large">Large</a-radio-button>
                <a-radio-button value="default">Default</a-radio-button>
                <a-radio-button value="small">Small</a-radio-button>
            </a-radio-group>
            <br/><br/>
            <a-button type="primary" :size="size">Primary</a-button>
            <a-button :size="size">Normal</a-button>
            <a-button type="dashed" :size="size">Dashed</a-button>
            <a-button type="danger" :size="size">Danger</a-button>
            <a-button type="link" :size="size">Link</a-button>
            <br/><br/>
            <a-button type="primary" :size="size">
                <template #icon>
                    <DownOutlined/>
                </template>
            </a-button>

            <a-button type="primary" shape="circle" :size="size">
                <template #icon>
                    <DownOutlined/>
                </template>
            </a-button>

            <a-button type="primary" shape="round" :size="size">
                <template #icon>
                    <DownOutlined/>
                </template>
            </a-button>

            <a-button type="primary" :size="size">
                <template #icon>
                    <DownOutlined/>
                </template>
                Download
            </a-button>
            <br/>
            <a-button-group :size="size">
                <a-button type="primary">
                    <LeftOutlined/>
                    Backward
                </a-button>
                <a-button type="primary">Forward
                    <RightOutlined/>
                </a-button>
            </a-button-group>
        </a-col>
    </a-row>
</template>

<script>
    import {Row, Col, Button, ConfigProvider, Dropdown, Menu, Radio} from 'ant-design-vue'
    import {
        LeftOutlined,
        RightOutlined,
        CloudDownloadOutlined,
        CloudOutlined,
        SearchOutlined,
        DownOutlined,
    } from '@ant-design/icons-vue'

    export default {
        name: "Button",
        data() {
            return {
                loading: false,
                iconLoading: false,
                size: 'large'
            }
        },
        components: {
            ARow: Row,
            ACol: Col,
            AButton: Button,
            AConfigProvider: ConfigProvider,
            AButtonGroup: Button.Group,
            ADropdown: Dropdown,
            AMenu: Menu,
            AMenuItem: Menu.Item,
            ARadioGroup: Radio.Group,
            ARadioButton: Radio.Button,
            LeftOutlined,
            RightOutlined,
            CloudDownloadOutlined,
            CloudOutlined,
            SearchOutlined,
            DownOutlined,
        },
        methods: {
            enterLoading() {
                this.loading = true
            },
            enterIconLoading() {
                this.iconLoading = {delay: 1000}
            },
            handleMenuClick(e) {
                console.log('click', e)
            },
            handSizeChange(e) {
                this.size = e.target.value
            }
        }
    }
</script>

<style lang="less" scoped>
    #components-button-demo-button-group > h4 {
        margin: 16px 0;
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
    }

    #components-button-demo-button-group > h4:first-child {
        margin-top: 0;
    }

    #components-button-demo-button-group .ant-btn-group {
        margin-right: 8px;
    }

</style>
